<template>
	<view class="page_box">
		<view class="head_box">
			<!-- tab -->
			<view class="order-nav u-flex">
				<view class="nav-item u-flex-col u-flex-1 u-col-center" v-for="nav in orderState" :key="nav.id"
					@tap="onNav(nav.type)">
					<view class="item-title" :class="{ 'title-active': orderType === nav.type }">{{ nav.title }}</view>
				</view>
			</view>
		</view>

		<view class="content_box">
			<scroll-view enable-back-to-top @scrolltolower="loadMore"  scroll-y="true"  class="scroll-box">
				<block v-if="orderType=='affte_sale'">
					<!-- 售后列表 -->
					<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id"
						@tap="jump('/pages/order/after-sale/detail', { aftersaleId: order.id })">
						<view class="order-head u-flex u-row-between">
							<text class="no">服务单号：{{ order.aftersale_sn }}</text>
							<text class="state">{{ order.aftersale_status_text }}</text>
						</view>
						<view class="order-content">
							<image class="goods_img" lazy-load fade-show :src="order.goods_image" mode="aspectFill">
							</image>
							<view class="goods-intro">
								<view class="row">
									<view class="goods-title">{{order.goods_title}}</view>
									<view class="goods-price">￥{{ order.goods_price || 0 }}</view>
								</view>
								<view class="row">
									<view class="goods_sku">{{ order.goods_sku_text ? order.goods_sku_text : '' }}
									</view>
									<view class="goods-num">X{{ order.goods_num || 0 }}</view>
								</view>
                <view class="row" v-if="order.vip_buy=='1'">
                  <view class="goods_sku">会员购买
                  </view>
                  <view class="goods-num">{{"￥"+ order.vip_money || 0 }}</view>
                </view>
							</view>
						</view>
						<view class="order-bottom">
							<view class="serve-status u-flex u-row-between"
								@tap.stop="jump('/pages/order/after-sale/log', { aftersaleId: order.id })">
								<view class="u-flex">
									<view class="serve-title">{{ order.aftersale_status_text }}</view>
									<view class="serve-content">{{ order.aftersale_status_desc }}</view>
								</view>
								<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
							</view>

							<!-- 按钮 -->
							<view class="btn-box u-flex" v-if="order.btns.length">
								<block v-for="orderBtn in order.btns" :key="orderBtn">
									<button v-if="orderBtn === 'cancel'"
										@tap.stop="onCancelAfterSale(order.id, orderIndex)"
										class="u-reset-button obtn">取消</button>
									<button v-if="orderBtn === 'delete'" style="background:#FFEEEE;color:#E50808"
										@tap.stop="onDeleteAfterSale(order.id, orderIndex)" class="u-reset-button obtn">
										删除
									</button>
								</block>
							</view>
						</view>
					</view>

				</block>
				<block v-else>
					<!-- 订单列表 -->
					<view class="order-list" v-for="(order, orderIndex) in orderList" :key="order.id"
						@tap.stop="jump('/pages/order/detail', { id: order.id })">
						<view class="order-head u-flex u-row-between">
							<text class="no">订单号：{{ order.order_sn }}</text>
							<text class="state">{{ order.status_name }}</text>
						</view>
						<view class="order-content" v-for="goods in order.item" :key="goods.id">
							<image class="goods_img" lazy-load fade-show :src="goods.goods_image" mode="aspectFill">
							</image>
							<view class="goods-intro">
								<view class="row">
									<view class="goods-title">{{goods.goods_title}}</view>
									<view class="goods-price">￥{{ goods.goods_price || 0 }}</view>
								</view>
								<view class="row">
									<view class="goods_sku">{{ goods.goods_sku_text ? goods.goods_sku_text : '' }}
									</view>
									<view class="goods-num">X{{ goods.goods_num || 0 }}</view>
								</view>
                <view class="row" v-if="order.vip_buy=='1'">
                  <view class="goods_sku">购买会员
                  </view>
                  <view class="goods-num">{{"￥"+ order.vip_money || 0 }}</view>
                </view>
							</view>
						</view>
						<view class="order-bottom">
							<view class="all-msg u-flex font-OPPOSANS">
								<!-- 优惠： -->
								<!-- <text class="all-unit">￥</text> -->
								<!-- {{ order.discount_fee }} ，运费： -->
								<!-- <text class="all-unit">￥</text> -->
								<!-- {{ order.dispatch_amount }} ， -->
								{{ order.status <= 0 ? '需付款' : '实付款' }}：
								<view class="all-money font-OPPOSANS">{{ order.total_fee }}</view>
							</view>

							<!-- 按钮 -->
							<view class="btn-box u-flex" v-if="order.btns.length">
								<block v-for="orderBtn in order.btns" :key="orderBtn">
									<button v-if="orderBtn === 'cancel'" @tap.stop="onCancel(order.id, orderIndex)"
										class="obtn u-reset-button">取消订单</button>
									<button v-if="orderBtn === 'pay'" @tap.stop="onPay(order.id,order)"
										class="obtn u-reset-button obtn3">付款</button>
									<button v-if="orderBtn === 'groupon'"
										@tap.stop="jump('/pages/activity/groupon/detail', { id: order.ext_arr.groupon_id })"
										class="obtn u-reset-button">
										拼团详情
									</button>
									<button v-if="orderBtn === 'delete'" @tap.stop="onDelete(order.id, orderIndex)"
										class="obtn u-reset-button">删除订单</button>
									<button v-if="orderBtn === 'express'" @tap.stop="onExpress(order.id, orderIndex)"
										class="obtn u-reset-button">查看物流</button>
								</block>
							</view>
						</view>
					</view>

				</block>

				<!-- 空白页 -->
				<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_groupon.png'"
					tipText="暂无商品，还有更多好货等着你噢~"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-show="orderList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isEmpty: false,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				orderType: 'all',
				orderList: [],
				orderState: [{
						id: 0,
						title: '全部',
						type: 'all'
					},
					{
						id: 1,
						title: '待付款',
						type: 'nopay'
					},
					{
						id: 2,
						title: '待发货',
						type: 'nosend'
					},
					{
						id: 3,
						title: '待收货',
						type: 'noget'
					},
					{
						id: 4,
						title: '待评价',
						type: 'nocomment'
					},
					{
						id: 9,
						title: '退款/售后',
						type: 'affte_sale'
					}
				]
			};
		},
		onLoad(option) {
			if (this.$Route.query.type) {
				this.orderType = this.$Route.query.type;
			}
		},
		onShow() {

			this.orderList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			if (this.orderType == 'affte_sale') {
				this.getAftersaleList();
			} else {
				this.getOrderList();
			}
		},
		methods: {
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// tab切换
			onNav(id) {
				// if (this.orderType !== id) {
				this.orderType = id;
				console.log(this.orderType)
				this.orderList = [];
				this.currentPage = 1;
				this.lastPage = 1;
				if (this.orderType == 'affte_sale') {
					this.getAftersaleList();
				} else {
					this.getOrderList();
				}
				// }
			},

			// 订单列表
			getOrderList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('order.index', {
					type: that.orderType,
					page: that.currentPage
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.orderList = [...that.orderList, ...res.data.data];
						that.isEmpty = !that.orderList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},

			// 售后列表
			getAftersaleList() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('order.aftersaleList', {
					type: 'all',
					page: that.currentPage
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.orderList = [...that.orderList, ...res.data.data];
						that.isEmpty = !that.orderList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},

			// 加载更多
			loadMore() {
        console.log("=======1111",111)
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					if (this.orderType == 'affte_sale') {
						this.getAftersaleList();
					} else {
						this.getOrderList();
					}
				}
			},

			// 删除订单
			onDelete(orderId, orderIndex) {
				let that = this;
				uni.showModal({
					title: '删除确认',
					content: '是否删除该订单？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.$http('order.deleteOrder', {
									id: orderId
								},
								'删除中...'
							).then(res => {
								if (res.code === 1) {
									that.$u.toast(res.msg);
									that.orderList.splice(orderIndex, 1);
								}
							});
						}
					}
				});
			},

			// 取消订单
			onCancel(id, orderIndex) {
				let that = this;
				uni.showModal({
					title: '取消确认',
					content: '是否确定取消该订单？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.$http('order.cancel', {
									id: id
								},
								'取消中...'
							).then(res => {
								if (res.code === 1) {
									that.$u.toast(res.msg);
									this.orderList.splice(orderIndex, 1);
								}
							});
						}
					}
				});


			},

			// 立即购买
			onPay(id, order) {
				var that = this;
				console.log("===============order", order, order.item)

				let confirmcartList = [];
				let isActivity = false;
				for (let item of order.item) {
					if (item.cart_type === 'invalid') {
						this.$u.toast('商品已失效');
						return false;
					}
					if (item.cart_type === 'activity') {
						isActivity = true;
					}
					order.item.goods_price = order.item.goods_sku_price_id ? order.item.goods_sku_price_id : 0;
					order.item.goods_type = order.order_type
					confirmcartList.push({
						goods_id: item.goods_id,
						sku_price_id: item.goods_sku_price_id ? item.goods_sku_price_id : 0,
						goods_price: item.sku_price ? item.sku_price.price : 0,
						goods_num: item.goods_num,
						goods_type: order.order_type,
						activity_type: item.activity_type || '',
						order_id: item.order_id
					});
				}
				if (confirmcartList.length > 1 && isActivity) {
					this.$u.toast('活动商品只能单独购买');
					return false;
				}
				that.jump('/pages/order/confirm', {
					goodsList: confirmcartList,
					from: 'list',
					orderType: order.type,
				});
				// uni.navigateTo({
				// 	url: `/pages/order/payment/method?orderId=${id}`
				// });
			},

			// 查看物流
			onExpress(orderId) {
				let that = this;
				that.$http('order.expressList', {
					order_id: orderId
				}).then(res => {
					if (res.code === 1) {
						if (res.data.length == 1) {
							this.jump('/pages/order/express/express-detail', {
								orderId: orderId,
								expressId: res.data[0].id
							});
						} else if (res.data.length > 1) {
							this.jump('/pages/order/express/express-list', {
								orderId: orderId
							});
						} else {
							that.$u.toast('暂无包裹~');
						}
					}
				});
			},

			//取消售后
			onCancelAfterSale(aftersaleId, orderIndex) {
				let that = this;
				uni.showModal({
					title: '取消确认',
					content: '是否确定取消该订单？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.$http(
								'order.cancelAftersaleOrder', {
									id: aftersaleId
								},
								'取消中...'
							).then(res => {
								if (res.code === 1) {
									this.$u.toast(res.msg);
									this.orderList.splice(orderIndex, 1);
								}
							});
						}
					}
				});


			},

			// 删除售后
			onDeleteAfterSale(aftersaleId, orderIndex) {
				let that = this;
				uni.showModal({
					title: '删除确认',
					content: '是否删除该订单？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.$http(
								'order.deleteAftersaleOrder', {
									id: aftersaleId
								},
								'删除中...'
							).then(res => {
								if (res.code === 1) {
									this.$u.toast(res.msg);
									this.orderList.splice(orderIndex, 1);
								}
							});
						}
					}
				});
			},
		}
	};
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss">
	.order-nav {
		// background: #fff;
		height: 88rpx;

		.nav-item {
			flex: 1;

			.item-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				line-height: 88rpx;
			}

			.title-active {
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FC5351;
			}
		}
	}

	.order-list {
		background: #fff;
		margin: 0 24rpx 24rpx;
		padding-bottom: 40rpx;
		border-radius: 16rpx;

		.order-bottom {
			.serve-status {
				height: 94rpx;
				background: rgba(246, 246, 246, 1);
				border-radius: 4rpx;
				margin: 0 20rpx 20rpx;
				padding: 0 20rpx;

				.serve-title {
					font-size: 26rpx;

					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					margin-right: 30rpx;
				}

				.serve-content {
					font-size: 20rpx;

					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
			}

			.btn-box {
				justify-content: flex-end;

				button {
					margin: 0 20rpx 0 0;
					padding: 0;
				}
			}

			.all-msg {
				// font-size: 24rpx;
				// color: #999;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				justify-content: flex-end;
				margin-bottom: 28rpx;
				padding: 0 30rpx;

				.all-unit {
					font-size: 20rpx;
				}

				.all-money {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					// font-size: 26rpx;
					// color: #333;
					// font-weight: 500;
					// &::before {
					// 	content: '￥';
					// 	font-size: 20rpx;
					// }
				}
			}

			.obtn {
				width: 160rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #FFFFFF;
				border-radius: 108rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				border: 1rpx solid #999999;
			}

			.obtn1 {}

			.obtn2 {}

			.obtn3 {
				color: #FC5351;
				border: 1rpx solid #FC5351;
			}
		}

		.order-head {
			padding: 0 20rpx;
			height: 88rpx;
			font-size: 24rpx;
			font-weight: 500;

			.no {
				color: #666666;
			}

			.state {
				color: #FE811C;
			}
		}

		.order-content {
			padding: 0 20rpx;
			margin-bottom: 8rpx;
			display: flex;

			.goods_img {
				width: 200rpx;
				height: 150rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
			}

			.goods-intro {
				flex-grow: 1;

				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.goods-title {
						font-weight: 500;
						color: #333333;
						font-size: 32rpx;
						width: 258rpx;
					}

					.goods-price {
						font-weight: bold;
						color: #333333;
						font-size: 28rpx;
					}

					.goods_sku,
					.goods-num {
						font-weight: 400;
						color: #777777;
						font-size: 24rpx;
					}
				}
			}
		}
	}
  .scroll-box{
    height: 100vh;
  }
</style>
